<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式化标签</title>
</head>
<body>
    <!-- 文本格式化标签：就是通过标签来美化文本外观 -->
    <!-- 1.b和strong：都有加粗的作用，但strong除了加粗还有强调作用。强调作用主要用于SEO时，便于提取对应的关键字 -->
    <!-- 都是行级标签不会自动换行 -->
    <b>加粗</b>
    <strong>加粗且强调</strong>

    <!-- 2. i和em：使文字倾斜，em具有强调作用。如果只是简单的倾斜效果用i标签就可以，比如添加图标等-->
   <!-- 都使行级标签不会自动换行 -->
    <i>倾斜</i>
    <em>倾斜且强调</em>

    <!-- 3.pre（块级标签 在浏览器中会独占一行）：预格式化文本 会保留文本的空格和换行以及宽度,文字的字号会小一号 -->
    <pre>预格式化文本 
        会保留文本的
           空格和换行以及宽度</pre>

    <!-- 4. small和big（行级标签 不会独占一行且不识别宽高）：分别让文字缩小或放大一号。big在 HTML5中淘汰了但并没有删除 -->
    <!-- 浏览器支持的最小字号为12px字 如果要显示比12px还小的文字效果，需要做处理 -->
    <p>我是正常大小的文字</p>
    <small>我是小一号的文字</small>
    <big>我是大一号的文字</big><!--在开发中尽量不使用淘汰了的标签-->

    <!-- 5.sub sup:设置文本为下标和上标 -->
    <p>正常显示：X1+X2=Y</p>
    <p>下标：X<sub>1</sub>+X<sub>2</sub>=Y</p>
    <p>上标：X<sup>2</sup>+X<sup>2</sup>=Y</p>
</body>
</html>